<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>

</head>
<body>
    <div class="app-home dpflex fdcolumn">

        <!-- 轮播图 -->
        <div class="home-banner swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../imgs/exercise4.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../imgs/excecise2.png" alt=""></div>
                <div class="swiper-slide"><img src="../imgs/exercise3.png" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>

        <!-- 主体内容 -->
        <div class="home-main">
            <div class="main1 dpflex">
                <p class="p1 dpflex fdcolumn" >今日排名
                    <img src="../imgs/index-card-rank.png" alt="">
                <span id="rank">9</span>
                </p>
                <div class="p2 dpflex fdcolumn">
                    <p>累计打卡 <i id="punchIn"></i> 天</p>
                    <img src="../imgs/index-card-sum.png" alt="">
                    <span id="daka">今日打卡</span>
                </div>

            </div>
            <div class="main2 dpflex ">
                <p class="p1" id="p1">
                    <span>运动数据</span>
                </p>
                <p class="p2 dpflex fdcolumn">
                    累积运动徽章
                    <img src="../imgs/index-card-badge.png" alt="">
                    <span class="hz" id="insigniaNum">3</span>
                    <span class="mm">枚</span>
                </p>

            </div>

            <div class="main3 dpflex ">
                <p id="homeTrain">
                    <span>课程训练</span>
                </p>
            </div>

            <div class="main4 dpflex ">
                <p>
                    <span>户外运动</span>
                </p>
            </div>

        </div>

        <!-- 底部 -->
        <!-- <div class="home-foot dpflex ">
            <div class="dpflex fdcolumn">
                <i class="iconfont icon-shouye active"></i>
                <span class="span2 active">首页</span>
            </div>
            <div class="dpflex fdcolumn">
                <i class="iconfont icon-yundong-"></i>
                <span class="span2">运动</span>

            </div>
           
            <div class="dpflex fdcolumn">
                <i class="iconfont icon-quanzi"></i>
                <span class="span2">圈子</span>
            </div>

            <div class="dpflex fdcolumn">
                <i class="iconfont icon-wode"></i>
                <span class="span2">我的</span>
            </div>

        </div> -->
    </div>

    
</body>
</html>